<template>
    <div id="apps">
        <div style="margin-left: 20px;">
            <headtitle :title="title"></headtitle>
            <!-- <selectbeforethired :title="title" :sel1="sel1"></selectbeforethired> -->
        </div>
        <div style="margin-left: 20px;">
            <h3>企业问题督办</h3>
            <div style="width: 95%;" id="select1">
                <select name="" id="sel1" selected="null" @change="sel">
                    <option value="">问题状态</option>

                </select>
                <select name="" id="sel2" selected="null" @change="sel">
                    <option value="">问题性质</option>

                </select>
                <select name="" id="sel3" selected="null" @change="sel">
                    <option value="">问题类别</option>

                </select>
                <select name="" id="sel4" selected="null" @change="sel">
                    <option value="">所属市区</option>

                </select>
                <select name="" id="sel5" selected="null" @change="sel">
                    <option value="">处理单位</option>

                </select>
                <select name="" id="sel6" selected="null" @change="sel">
                    <option value="">时限</option>

                </select>

                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block" @click="sel2">
                        <el-date-picker v-model="value1" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
                <span>至</span>
                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block" @click="sel2">
                        <el-date-picker v-model="value2" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
            </div>
            <div style="margin-top: 20px;" id="select2">
                <div id="left">
                    <input type="text" style=" width: 300px; height: 28px;">
                    <div style="width: 80px;height: 32px;border: 0px;background-color: #169bd5;color: white;line-height: 28px;text-align: center;display: inline-block;"
                        @click="tjsel" id="tjsel">
                        搜索</div>
                </div>
                <div id="right"
                    style="z-index: 999;position: absolute;right: 20%;background-color: white;height: 30px;overflow: hidden;border: #169bd5 1px solid;">
                    <span
                        style="width: 150px;background-color: #169bd5;color: white;height: 30px;display: inline-block;line-height: 30px;text-align: center;"
                        @click="open">自定义列表</span>
                    <br>
                    <input type="checkbox" checked="checked" value="1" onclick="return false;"><span
                        style="font-size: 14px;">具体问题</span>
                    <br>
                    <input type="checkbox" id="wtlb"><span style="font-size: 14px;">问题类别</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="2"><span
                        style="font-size: 14px;">企业名称</span>
                    <br>
                    <input type="checkbox" id="wtxz"><span style="font-size: 14px;">问题性质</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;"><span
                        style="font-size: 14px;">办理状态</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="5"><span
                        style="font-size: 14px;">督办状态</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="6"><span
                        style="font-size: 14px;">督办方式</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="7"><span
                        style="font-size: 14px;">超时状态</span>
                    <br>
                    <input type="checkbox" id="sssq"><span style="font-size: 14px;">所属市区</span>
                    <br>
                    <input type="checkbox" id="cldw"><span style="font-size: 14px;" value="9">处理单位</span>
                    <br>
                    <input type="checkbox" id="tjsj"><span style="font-size: 14px;" value="10">提交时间</span>
                    <br>



                </div>
            </div>
        </div>
        <div id="table1" style="position: relative;">
            <div style="margin-left: 20px;" id="msgbox">

                <el-table :data="tableData" style="width: 100% ;color: black;" height="450" border="true"
                    :cell-style="{ textAlign: 'center', padding: '6px 0' }"
                    :header-cell-style="{ 'text-align': 'center', color: 'black' }">
                    <el-table-column fixed prop="id" label="序号" width="60" />
                    <el-table-column prop="question" label="具体问题" width="500" />
                    <el-table-column prop="enterpriseName" label="企业名称" width="180" />
                    <el-table-column prop="type" label="问题类别" width="180" v-if="b" />
                    <el-table-column prop="property" label="问题性质" width="100" v-if="c" />
                    <el-table-column prop="status" label="办理状态" width="100" />
                    <el-table-column prop="data1" label="督办状态" width="150" />
                    <el-table-column prop="data2" label="督办方式" width="150" />
                    <el-table-column prop="data3" label="超时状态" width="150" />
                    <el-table-column prop="area" label="所属市区" width="150" v-if="d" />
                    <el-table-column prop="unit" label="处理单位" width="200" v-if="e" />
                    <el-table-column prop="submitTime" label="提交时间" width="200" v-if="f" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                            <el-button link
                                v-if="scope.row.id === show1 || scope.row.id === show2 || scope.row.id === show3 || scope.row.id === show4 || scope.row.id === show5 || scope.row.id === show6 || scope.row.id === show7 || scope.row.id === show8 || scope.row.id === show9 || scope.row.id === show10"
                                type="primary" size="small" @click="handleClick1(scope)">督办</el-button>
                        </template>
                    </el-table-column>


                </el-table>
                <div style="position: absolute;right: 0px;z-index: 999;width: 10%;height: 70px;border: 1px solid #169bd5;background-color: white;"
                    id="msg">
                    <input type="checkbox" name="" id="xtxx" checked="checked">系统消息
                    <br>
                    <input type="checkbox" name="" id="dx">短信
                    <br>
                    <div style="background-color: #169bd5;color: white;text-align: center;line-height: 30px;height: 30px;width: 100%;"
                        @click="send">提交</div>
                </div>

            </div>
            <div style="position: absolute;top: 50px;left: 0px;width: 100%;z-index:999;" id="showbox">
                <div style="position: absolute;top: -25px;right: 0px;width: 30px;height: 20px;background-color: #169bd5;font-weight: 600;line-height: 20px;text-align: center;font-size: 20px;"
                    @click="close">x</div>
                <table border="1px" cellpadding="0" cellspacing="0"
                    style="width: 100%;border: #ebeef5;text-align: center;margin-left: 1%;">
                    <tr>
                        <td id="main">序号</td>
                        <td id="values">{{ msg1 }}</td>
                        <td id="main">具体问题</td>
                        <td id="values">{{ msg2 }}</td>
                    </tr>
                    <tr>
                        <td id="main">企业名称</td>
                        <td id="values">{{ msg3 }}</td>
                        <td id="main">问题类别</td>
                        <td id="values">{{ msg4 }} </td>
                    </tr>
                    <tr>
                        <td id="main">问题性质</td>
                        <td id="values">{{ msg5 }}</td>
                        <td id="main">办理状态</td>
                        <td id="values">{{ msg6 }}</td>
                    </tr>
                    <tr>
                        <td id="main">督办状态</td>
                        <td id="values">{{ msg7 }}</td>
                        <td id="main">督办方式</td>
                        <td id="values">{{ msg8 }}</td>
                    </tr>
                    <tr>
                        <td id="main">超时状态</td>
                        <td id="values">{{ msg9 }}</td>
                        <td id="main">所属市区</td>
                        <td id="values">{{ msg10 }}</td>
                    </tr>
                    <tr>
                        <td id="main">处理单位</td>
                        <td id="values">{{ msg11 }}</td>
                        <td id="main">提交时间</td>
                        <td id="values">{{ msg12 }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 分页 -->
        <div style="margin-left: 20px;" id="pageall">
            <span
                style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-right: 30px;">首页</span>

            <div class="page">
                <el-pagination background layout="prev, pager, next" :total="totallenght" @prev-click="prev"
                    @next-click="next" />

            </div>
            <span
                style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-left: 30px;">尾页</span>
        </div>
    </div>
</template>

<script lang="ts">
import Axios from "@/router/ycyaxios/axiosinstance";
// import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import { toRaw } from '@vue/reactivity'
import { ref, onMounted, onBeforeMount, reactive } from 'vue'
import { useStore } from "vuex"
import { useRouter } from 'vue-router'
// import {components} from 'vue'
// import  selectbeforethired from '../../components/Problems/selectbeforethired'
import headtitle from '../../components/Problems/headtitle.vue'
export default {
    name: 'SuperviseManagement',
    data() {
        return {
            title: "问题督办管理",

        }
    },
    components: {
        headtitle,
        //    selectbeforethired,
    },
    setup() {
        const router = useRouter()
        const store = useStore();
        let b: any = ref("true");
        let c: any = ref("true");
        let d: any = ref("true");
        let e: any = ref("true");
        let f: any = ref("true");
        let g: any = ref("true");
        let h: any = ref("true");
        let i: any = ref("true");
        let data: any = ref();
        let idshow: any = ref();


        //获取数据
        const totallenght: any = ref()
        const tableData: any = ref('')
        store.commit("getmanagement", { page: 1 })
        data = [];
        data = store.state.ycy.management;
        tableData.value = data;
        totallenght.value = tableData.value.length;

        ///判断按钮显示
        const show1: any = ref('')
        const show2: any = ref('')
        const show3: any = ref('')
        const show4: any = ref('')
        const show5: any = ref('')
        const show6: any = ref('')
        const show7: any = ref('')
        const show8: any = ref('')
        const show9: any = ref('')
        const show10: any = ref('');
        setTimeout(() => {
                idshow = [];
                idshow = store.state.ycy.idshow
                   console.log(idshow[1])
                show1.value = idshow[0]+1;
                show2.value = idshow[1]+1;
                show3.value = idshow[2]+1;
                show4.value = idshow[3]+1;
                show5.value = idshow[4]+1;
                show6.value = idshow[5]+1;
                show7.value = idshow[6]+1;
                show8.value = idshow[7]+1;
                show9.value = idshow[8]+1;
                show10.value = idshow[9]+1;
                console.log(show1.value)
            }, 1000)
           
        
        ///选择框的数据开始
        const sel = () => {
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            const sel6: any = document.getElementById("sel6");
            const sele6: any = sel6.value;

            store.commit("selmanagement", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5, sel6: sele6, })
        }
        const sel2 = () => {
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            const sel6: any = document.getElementById("sel6");
            const sele6: any = sel6.value;
            const data: any = value1.value;
            const year: any = data.getFullYear()
            const years: any = year.toString()
            const day: any = data.getDate()
            const days: any = day.toString()
            const month: any = data.getMonth()
            const months: any = month.toString()
            const daytime: any = (years + "-" + months + "-" + days)
            //开始时间戳
            let start = new Date(daytime).getTime();
            const data2: any = value2.value;
            const year2: any = data2.getFullYear()
            const years2: any = year2.toString()
            const day2: any = data2.getDate()
            const days2: any = day2.toString()
            const month2: any = data2.getMonth()
            const months2: any = month2.toString()
            const daytime2: any = (years2 + "-" + months2 + "-" + days2)
            //结束时间戳
            let end = new Date(daytime2).getTime();

            //  console.log(start,end )

            store.commit("selmanagement", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5, sel6: sele6, })
        }
        ///选择框的数据结束
        ///搜索框选择数据开始
        const tjsel = () => {
            const tjsel: any = document.getElementById("tjsel");
            const tjsel1: any = tjsel.value;
            // console.log(tjsel1)
            store.commit("tjselmannagement", { page: 1, tj: tjsel1 })
        }
        ///搜索框选择数据结束
        // var pages = reactive({
        //     x: null,
        //     y: null,
        // });
        const close = (event: any) => {
            // pages.x = event.pageX;
            // pages.y = event.pageY;
            // console.log(pages.y)
            // console.log(pages.x)
            let showbox: any = document.getElementById("showbox");
            console.log(showbox)
            showbox.style.display = "none";
            let msgbox: any = document.getElementById("msgbox");
            msgbox.style.opacity = 1;
        }
        //结束获取数据
        const msg1 = ref(''); const msg2 = ref(''); const msg3 = ref(''); const msg4 = ref(''); const msg5 = ref(''); const msg6 = ref(''); const msg7 = ref(''); const msg8 = ref(''); const msg9 = ref(''); const msg10 = ref(''); const msg11 = ref(''); const msg12 = ref('');

        const handleClick = (value: any) => {
            msg1.value = value.id;
            let showbox: any = document.getElementById("showbox");
            showbox.style.display = "block";
            let msgbox: any = document.getElementById("msgbox");
            msgbox.style.opacity = 0;
        }

        /////发送消息/////////////////////////
        const msgid: any = ref('')
        const handleClick1 = (value: any) => {
            //   console.log(value.id)
            let id = value.$index
                + 1
            msgid.value = value.row.id
            let msg1: any = document.getElementById("msg");
            // console.log(msg1)
            msg1.style.display = "block"
            msg1.style.top = id * 38 + "px"

        }
        const send = () => {
            let xtxx: any = document.getElementById("xtxx")
            const xtxx1: any = xtxx.checked;
            let dx: any = document.getElementById("dx")
            const dx1: any = dx.checked;
            //   console.log(dx1)
            let msgstring: any = '';
            if (xtxx1 == true && dx1 == false) {
                msgstring = "系统消息"
            }
            else if (xtxx1 == false && dx1 == true) {
                msgstring = "短息"
            }
            else if (xtxx1 == true && dx1 == true) {
                msgstring = "系统消息/短息"
            }
            //   console.log(msgstring)
            Axios({
                method: "post",
                url: "questionList/doSupervision",
                params: {
                    // id: msgid.value,
                    id:6,
                    method: msgstring,


                }
            }).then((resp) => {
                console.log(resp)
            })
            //修改状态
            store.commit("changmanagement", { id: msgid.value, data: msgstring })
            let msg1: any = document.getElementById("msg");
            msg1.style.display = "none"
        };
        ///////////发送消息结束//////////////
        const open = () => {
            const a: any = document.getElementById("right");
            const wtlb: any = document.getElementById("wtlb");
            b.value = wtlb.checked;
            const wtxz: any = document.getElementById("wtxz");
            c.value = wtxz.checked;
            const sssq: any = document.getElementById("sssq");
            d.value = sssq.checked;
            const cldw: any = document.getElementById("cldw");
            e.value = cldw.checked;
            const tjsj: any = document.getElementById("tjsj");
            f.value = tjsj.checked;

            if (parseInt(a.style.height) == 30) {
                a.style.height = "280px";
                // console.log(1111111);

            }
            else if (parseInt(a.style.height) == 280) {
                a.style.height = "30px";

            }

        }
        const size = ref<'default'>('default')

        const value1 = ref('')
        const value2 = ref('')
        // let datas=[];

        let page = 0;
        const prev = () => {
            page--;
            console.log(page)
        }
        const next = () => {
            page++;
            console.log(page)
        }

        const shortcuts = [
            {
                text: 'Today',
                value: new Date(),
            },
            {
                text: 'Yesterday',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24)
                    return date
                },
            },
            {
                text: 'A week ago',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                    return date
                },
            },
        ]

        const disabledDate = (time: Date) => {
            return time.getTime() > Date.now()
        };
        return {
            disabledDate,
            size,
            shortcuts,
            value2,
            value1,
            tableData,
            totallenght,
            prev,
            next,
            handleClick1,
            handleClick,
            open,
            b, c, d, e, f, g, h, i,
            sel, sel2,
            tjsel,
            send,
            idshow,
            show1, show2, show3, show4, show5, show6, show7, show8, show9, show10,
            msg1, msg2, msg3, msg4, msg5, msg6, msg7, msg8, msg9, msg10, msg11, msg12,
            close,



        }
    }
}
</script>

<style scoped>
#showbox {
    display: none;
}

#main {
    width: 4%;
    height: 40px;
    font-weight: 800;


}

#values {
    width: 10%;
}

#msg {
    display: none;
}

#apps {
    background-color: white;
    /* width: 1200px;
     */
    width: 80%;
    /* height: 200px; */
    /* border: 1px solid red; */
    border-radius: 5px;
}

#pageall {
    width: 95%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

select {
    width: 120px;
    height: 28px;

}

#select1 {
    display: flex;
    justify-content: space-between;
}

#select2 {
    width: 95%;
    display: flex;
    justify-content: space-between;
}

#table1 {
    width: 95%;
    margin-top: 40px;
}
</style>